<template>
	<view class="container">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="addbankBind_title">
			<uni-nav-bar left-icon="left" fixed :border="false" color="#fff" background-color="#8D84FF" title="添加银行卡"
				@clickLeft="back" />
		</view>
		<!-- <top-back-navbar position="fixed" title="银行绑卡" background="#001B4D" color="#fff"></top-back-navbar> -->
		<view class="bangka" v-if="bank_obj_err == 0">
			已绑卡
		</view>
		<view class="bangka" v-if="bank_obj_err == 1" style="background-color: red;">
			审核失败
		</view>
		<view class="box" :class="bank_obj_err == 0 || bank_obj_err == 1 ? '':'wei'">
			<view class="item">
				<p>
					开户人姓名
				</p>
				<view class="input">
					<input type="text" value="" v-model="accountName " placeholder="张XX"
						placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			<view class="item">
				<p>
					银行账号
				</p>
				<view class="input">
					<input type="text" value="" v-model="bankCardNo" placeholder="1XXXXXXXXXXX"
						placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>
			<!--<view class="item">
				<p style="width: 100%;">
					银行卡卡号面照片
				</p>
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalPersonBankCardPathFun" limit="1" ref="filePickerss" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image"
						style="color: #C0C0C0;font-size:14px;">
						请点击上传
					</uni-file-picker>
				</view>
			</view> -->
			<view class="item">
				<p>
					开户银行
				</p>
				<picker style="width: 65%;" mode='selector' @change="confirmBank" :value="khyh_index"
					:range="pickerBanklist">
					<view class="uni-input" style="color: #D1C8C4;">{{bankname}}</view>
				</picker>
			</view>
			<!-- <view class="item">
				<p>
					开户网点
				</p>
				<picker style="width: 60%;" @change="bankCardNoaddarschange"
					@columnchange="bankCardNoaddarscolumnchange"
					:range="[bankCardNoaddars_list,bankCardNoaddarschange_arr2]" mode='multiSelector'
					range-key="areaName">
					<view class="uni-input" v-if="bankCardNoaddars=='--'" style="color: #C0C0C0;font-size:14px;"> 请选择
					</view>
					<view class="uni-input" v-else>
						{{bankCardNoaddars}}
					</view>


				</picker>
				<view class="" style="position: absolute;right: 0;">
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view> -->
			<view class="item">
				<p>
					开户支行
				</p>
				<view class="input">
					<input type="text" value="" v-model="bankbranch" placeholder="XX支行"
						placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>

			<view class="item">
				<p>
					银行预留手机号
				</p>
				<view class="input">
					<input type="text" value="" v-model="reservedPhoneNo" placeholder="1XXXXXXXXXX"
						placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view>

			<!-- <view class="item">
				<p>
					身份证号码
				</p>
				<view class="input">
					<input type="text" value="" v-model="legalPersonIdNo" placeholder="3XXXXXXXXXXXXXXXXX"
						placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view> -->
			<!-- <view class="item" style="display: block;">
				<p style="width: 100%;">
					证件有效开始日期
				</p>
				<view class="uni-list-cell-db">
					<picker mode="multiSelector" :value="[y_index,m_index,d_index]"
						:range="[star_year,star_month,star_day]" @change="idEffectiveDateStartChange" range-key="num">
						<view class="uni-input" v-if="idEffectiveDateStart!=''">{{idEffectiveDateStart}}</view>
						<view class="uni-input" v-else style="color: #C0C0C0;font-size:14px;"> 请选择</view>
					</picker>
				</view>
				<view class="" style="position: absolute;right: 0;top: 10px;">
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>
			<view class="item" style="display: block;">
				<p style="width: 100%;">
					证件有效结束日期
				</p>
				<view class="uni-list-cell-db">
					<picker mode="multiSelector" :value="[y_index,m_index,d_index]"
						:range="[end_year,end_month,end_day]" @change="idEffectiveDateEndChange" range-key="num">
						<view class="uni-input" v-if="idEffectiveDateEnd!=''">{{idEffectiveDateEnd}}</view>
						<view class="uni-input" v-else style="color: #C0C0C0;font-size:14px;"> 请选择</view>
					</picker>
				</view>
				<view class="" @click="idEffectiveDateEnd = '2099-12-31'"
					style="background-color: #8D84FF;width: 80px;height: 20px;text-align: center;line-height: 20px; color: #fff;border-radius: 50px;">
					长期
				</view>
				<view class="" style="position: absolute;right: 0;top: 10px;">
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view> -->


			<!-- 	<view class="item">
				<p style="width: 100%;">
					请上传身份证人像面
				</p>
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalIdCardProsPathselect" limit="1" ref="filePicker" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image"
						style="color: #C0C0C0;font-size:14px;">
						请点击上传
					</uni-file-picker>
				</view>
			</view>

			<view class="item">
				<p style="width: 100%;">
					请上传身份证国徽面
				</p>
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalIdCardConsPathselect" limit="1" ref="filePickers" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image"
						style="color: #C0C0C0;font-size:14px;">
						请点击上传
					</uni-file-picker>
				</view>
			</view> -->
			<!-- <view class="item">
				<p style="width: 100%;">
					银行卡卡号面照片
				</p>
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalPersonBankCardPathFun" limit="1" ref="filePickerss" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image"
						style="color: #C0C0C0;font-size:14px;">
						请点击上传
					</uni-file-picker>
				</view>
			</view> -->
			<!-- <view class="item">
				<p>
					身份地址
				</p>
				<picker style="width: 60%;" @change="businessAddresschange" @columnchange="businessAddresscolumnchange"
					:range="[businessAddress_list,businessAddresschange_arr2,businessAddresschange_arr3]"
					mode='multiSelector' range-key="areaName">
					<view class="uni-input" v-if="businessAddress_aa!=''">{{businessAddress_aa}}</view>
					<view class="uni-input" v-else style="color: #C0C0C0;font-size:14px;">请选择身份地址</view>
				</picker>
				<view class="" style="position: absolute;right: 0;">
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view>

			<view class="item">
				<p>
					身份证住址信息
				</p>
				<view class="input">
					<input type="text" value="" v-model="businessAddress" placeholder="请输入详细地址"
						placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view> -->

			<!-- <view class="item">
				<p>
					邮箱
				</p>
				<view class="input">
					<input type="text" value="" v-model="contactEmail" disabled placeholder="1XXX@XXX.COM"
						placeholder-style="color: #C0C0C0;font-size:14px;" />
				</view>
			</view> -->
			<!-- <view class="item">
				<p>
					电话
				</p>
				<view class="input">
					<input type="text" value="" v-model="contactPhone" />
				</view>
			</view> -->
			<!--<view class="item">
				<p>
					职业
				</p>
				<view class="uni-list-cell-db">
					<picker @change="professionchange" :value="profession_index" :range="profession_list">
						<view class="uni-input" v-if="profession_list[profession_index] == '请选择职业'"
							style="color: #C0C0C0;font-size:14px;">{{profession_list[profession_index]}}</view>
						<view class="uni-input" v-else>{{profession_list[profession_index]}}</view>
					</picker>
				</view>
				<view class="" style="position: absolute;right: 0;">
					<uni-icons type="forward" size="20"></uni-icons>
				</view>
			</view> -->







		</view>
		<view class="qianyue">
			<view class="" style="width: 100%; text-align: center;color: red;" v-if="bank_obj_err == 1">
				失败原因
			</view>
			<view class="" style="width: 100%; text-align: center;color: red;" v-if="bank_obj_err == 1">
				{{bank_obj_msg}}
			</view>
			<button @click="sure_qianyue()">新增/修改</button>
		</view>

		<!-- <u-picker mode="selector" v-model="pickerShow" :range="pickerBanklist" @confirm="confirmBank"></u-picker> -->
	</view>
</template>

<script>
	import {
		member_withdraw,
		api_index_get_province_city_area_profession,
		api_index_zishanghu,
		api_index_show_zishanghu_info
	} from '@/api/wallet.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				id: '',
				openid: '',
				signedName: '',
				contactEmail: '715436538@qq.com',
				contactPhone: '',
				profession: '',
				legalPersonIdNo: '',
				idEffectiveDateStart: '',
				idEffectiveDateEnd: '',
				legalIdCardProsPath: '',
				legalIdCardConsPath: '',
				accountName: '',
				bankCardNo: '',
				bankbranch: '',
				cityCode: '',
				provinceCode: '',
				reservedPhoneNo: '',
				receiverName: '',
				receiverPhone: '',
				receiverAddress: '',
				businessAddressProvince: '',
				legalPersonBankCardPath: '',
				businessAddressCity: '',
				businessAddressArea: '',
				businessAddress: '',
				profession_list: [],
				profession_index: 2,
				idEffectiveDateStart_date: currentDate,
				idEffectiveDateEnd_date: currentDate,
				imageStyles: {
					width: 200,
					height: 150,
				},
				bankCardNoaddars_list: [],
				bankCardNoaddarschange_arr2: [],
				bankCardNoaddars: '--',
				businessAddress_list: [],
				businessAddresschange_arr2: [],
				businessAddresschange_arr3: [],
				businessAddress_aa: '',
				pickerBanklist: [],
				selectBanklist: [],
				pickerShow: false,
				bankname: '中国XX',
				bank_obj_err: -1,
				date_arr: [],
				star_year: [],
				star_month: [],
				star_day: [],
				end_year: [],
				end_month: [],
				end_day: [],
				bank_obj_msg: '',
				y_index: 0,
				m_index: 0,
				d_index: 0,
				khyh_index: 0
				// bankCardNoaddars_index:[0,0]
			};
		},
		onLoad: function(e) {
			this.id = e.escrow_id;
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.get_shoper_data()
					this.getBankList()
					this.get_bank_value()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
			this.set_date()
		},
		mounted() {
			// this.countDownTimer()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			idEffectiveDateStartcolumnchange(e) {
				var column = e.detail.column
				var index = e.detail.value

				if (column == 0) {
					this.star_month = this.star_year[index].months
					this.star_day = this.star_month[0].days
				}
				if (column == 1) {
					this.star_day = this.star_month[index].days
				}
			},
			idEffectiveDateEndcolumnchange(e) {
				var column = e.detail.column
				var index = e.detail.value

				if (column == 0) {
					this.end_month = this.end_year[index].months
					this.end_day = this.end_month[0].days
				}
				if (column == 1) {
					this.end_day = this.end_month[index].days
				}
			},

			set_date() {

				var startYear = 1970;
				var endYear = 2099;
				var yearData = [];
				var Month = []
				var Day = []
				for (var year = startYear; year <= endYear; year++) {

					var obj = {
						year: year,
						num: year + '年'
					}
					yearData.push(obj)

				}
				for (var month = 1; month <= 12; month++) {
					var obj = {
						month: month,
						num: month + '月'
					};
					if (obj.month < 10) {
						obj.month = '0' + obj.month
					}
					Month.push(obj)
				}
				for (var day = 1; day <= 31; day++) {
					var obj = {
						day: day,
						num: day + '日'
					};;
					if (obj.day < 10) {
						obj.day = '0' + obj.day
					}
					Day.push(obj)
				}

				this.star_year = yearData

				this.star_month = Month

				this.star_day = Day



				this.end_year = yearData

				this.end_month = Month

				this.end_day = Day



				// 创建一个表示今天日期的Date对象
				var today = new Date();

				// 获取年份
				var year = today.getFullYear();

				// 获取月份（注意：月份从0开始，所以要加1）
				var month = today.getMonth() + 1;

				// 获取日期
				var day = today.getDate();
				for (var i = 0; i < yearData.length; i++) {
					if (yearData[i].year == year) {
						this.y_index = i
					}
				}
				for (var i = 0; i < Month.length; i++) {
					if (Month[i].month == month) {

						this.m_index = i
					}
				}

				for (var i = 0; i < Day.length; i++) {

					if (Day[i].day == day) {
						this.d_index = i
					}
				}


			},
			async getBankList() {
				let up = {
					escrow_id: this.id,
					openid: this.openid,
					type: 1
				}
				let res = await member_withdraw(up);
				this.pickerBanklist = res.banklist;
			},
			async get_bank_value() {
				let data = await api_index_show_zishanghu_info(this.openid);
				console.log(data);
				this.bank_obj_err = data.error;
				this.bank_obj_msg = data.message;
			},
			confirmBank(e) {
				this.bankname = this.pickerBanklist[e.detail.value];
				console.log(this.bankname);
			},
			async get_shoper_data() {
				let data = await api_index_get_province_city_area_profession(this.openid);
				this.profession_list = data.profession;
				this.profession = data.profession[0];
				this.bankCardNoaddars_list = data.province_city_data;
				this.bankCardNoaddarschange_arr2 = this.bankCardNoaddars_list[0].city;
				this.businessAddress_list = data.province_city_area_data;
				this.businessAddresschange_arr2 = this.businessAddress_list[0].city;
				this.businessAddresschange_arr3 = this.businessAddresschange_arr2[0].area;
			},
			professionchange(e) {
				this.profession_index = e.detail.value;
				this.profession = this.profession_list[e.detail.value]
				if (this.profession_list[e.detail.value] != '其他类') {
					this.profession = e.detail.value
				}
			},
			idEffectiveDateStartChange(e) {
				var index = e.detail.value;
				var str = this.star_year[index[0]].year + '-' + this.star_month[index[1]].month + '-' + this.star_day[
					index[2]].day;
				this.idEffectiveDateStart = str;
				this.idEffectiveDateStart_date = str;
			},
			idEffectiveDateEndChange(e) {
				var index = e.detail.value;
				var str = this.end_year[index[0]].year + '-' + this.end_month[index[1]].month + '-' + this.end_day[index[
					2]].day;
				this.idEffectiveDateEnd = str;
				this.idEffectiveDateEnd_date = str;
			},

			legalIdCardProsPathselect(e) {
				var filePath = e.tempFilePaths[0];
				var _this = this;
				uni.uploadFile({
					url: 'http://bdzx.jibeimall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
					filePath: filePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						var data = JSON.parse(res.data)
						if (data.error == 0) {
							this.legalIdCardProsPath = data.url
						} else {
							this.legalIdCardProsPath = ''
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							})
							this.$refs.filePicker.clearFiles();
						}
					},
					fail() {

					}
				});

			},

			legalIdCardConsPathselect(e) {
				var filePath = e.tempFilePaths[0]
				var _this = this
				uni.uploadFile({
					url: 'http://bdzx.jibeimall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
					filePath: filePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						var data = JSON.parse(res.data)
						if (data.error == 0) {
							this.legalIdCardConsPath = data.url
						} else {
							this.legalIdCardConsPath = ''
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							})
							this.$refs.filePickers.clearFiles();
						}
					},
					fail() {

					}
				});
			},


			legalPersonBankCardPathFun(e) {
				var filePath = e.tempFilePaths[0]
				var _this = this
				uni.uploadFile({
					url: 'http://bdzx.jibeimall.com/app/index.php?i=4&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
					filePath: filePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						var data = JSON.parse(res.data)
						console.log(data);
						if (data.error == 0) {
							this.legalPersonBankCardPath = data.url
						} else {
							this.legalPersonBankCardPath = ''
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							})
							this.$refs.filePickerss.clearFiles();
						}
					},
					fail() {

					}
				});
			},

			bankCardNoaddarschange(e) {
				var index = e.detail.value
				var addars = this.bankCardNoaddars_list[index[0]].areaName + this.bankCardNoaddars_list[index[0]].city[
					index[1]].areaName;
				this.provinceCode = this.bankCardNoaddars_list[index[0]].areaCode;
				this.cityCode = this.bankCardNoaddars_list[index[0]].city[index[1]].areaCode;
				this.bankCardNoaddars = addars;
			},
			bankCardNoaddarscolumnchange(e) {
				var column = e.detail.column
				if (column == 0) {
					this.bankCardNoaddarschange_arr2 = this.bankCardNoaddars_list[e.detail.value].city;
				}
			},
			businessAddresschange(e) {
				var index = e.detail.value;
				var shen = this.businessAddress_list[index[0]];
				var shi = shen.city[index[1]];
				var xian = shi.area[index[2]];
				this.businessAddress_aa = shen.areaName + shi.areaName + xian.areaName;
				this.businessAddressProvince = shen.areaCode;
				this.businessAddressCity = shi.areaCode;
				this.businessAddressArea = xian.areaCode;
			},
			businessAddresscolumnchange(e) {
				var column = e.detail.column;
				var index = e.detail.value;
				if (column == 0) {
					this.businessAddresschange_arr2 = this.businessAddress_list[index].city;
					this.businessAddresschange_arr3 = this.businessAddresschange_arr2[0].area;
				}
				if (column == 1) {
					this.businessAddresschange_arr3 = this.businessAddresschange_arr2[index].area;
				}
			},

			async sure_qianyue() {
				var openid = this.openid;
				var data = {
					'openid': this.openid,
					'contactEmail': this.contactEmail,
					'profession': this.profession,
					'legalPersonIdNo': this.legalPersonIdNo,
					'idEffectiveDateStart': this.idEffectiveDateStart,
					'idEffectiveDateEnd': this.idEffectiveDateEnd,
					'legalIdCardProsPath': this.legalIdCardProsPath,
					'legalIdCardConsPath': this.legalIdCardConsPath,
					'legalPersonBankCardPath': this.legalPersonBankCardPath,
					'accountName': this.accountName,
					'bankCardNo': this.bankCardNo,
					'cityCode': this.cityCode,
					'provinceCode': this.provinceCode,
					'reservedPhoneNo': this.reservedPhoneNo,
					'businessAddressProvince': this.businessAddressProvince,
					'businessAddressCity': this.businessAddressCity,
					'businessAddressArea': this.businessAddressArea,
					'businessAddress': this.businessAddress,
					'bankbranch': this.bankbranch,
					'bankname': this.bankname,
				}
				let aujs = true
				// for (let key in data) {
				// 	if (data[key] == '') {
				// 		aujs = false;
				// 	}
				// }
				// if (!aujs) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '有值未填'
				// 	})
				// } else {}
				let res = await api_index_zishanghu(data);
				if (res.error === 0) {
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}
			},




			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}

		}

	}
</script>

<style lang="less">
	.addbankBind_title {
		width: 88rpx;
	}

	.container {
		height: 100vh;
		width: 100vw;
		background-color: #F1F4F9;
		position: relative;

	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #8D84FF;
	}

	.bangka {
		width: 90%;
		background-color: #0751AA;
		color: #fff;
		text-align: center;
		border-radius: 50px;
		height: 30px;
		line-height: 30px;
		margin: 20rpx auto;
	}

	.box {
		width: 100%;
		// height: 75vh;
		// overflow: auto;
		background-color: #fff;
		border-radius: 10px;
		padding: 0 15rpx;

		.item {
			display: flex;
			align-items: center;
			border-bottom: 1px solid #DFDFDF;
			padding: 15upx 0;
			position: relative;

			p {
				width: 35%;
			}

			.input {
				width: 65%;

				input {
					width: 100%;


				}
			}

		}


	}

	.wei {
		height: 70vh;
		margin-top: 40rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.qianyue {
		width: 100%;
		position: absolute;
		bottom: 25px;
		padding: 0 15px;
		left: 0;
		right: 0;
		margin: auto;

		button {
			width: 100%;
			height: 40px;
			font-size: 20px;
			background-color: #8D84FF;
			color: #fff;
			line-height: 40px;
			border-radius: 50px;
			margin-top: 20px;
		}
	}

	.example-body {
		// padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

	}

	.text {
		font-size: 14px;
		color: #333;
	}
</style>